<template>
    <div class="app-container">
      <!-- v-hasPermi="['api:mpManage:addPoster']" -->
      <el-button
        size="small"
        type="primary"
        icon="Plus"
        @click="add()"
        
        >新增</el-button
      >
      <h3></h3>
      <!-- <el-form ref="share_sys" v-hasPermi="['member:mpPoster:getOfficialList']" :model="form" label-width="auto" style="max-width: 600px" :rules="formRules">
     
       
       <el-form-item>
        <span>设置了推广新的公众号，海报模板也将以新的模版为主</span>
      </el-form-item>
      <el-form-item label="公众号海报" >
        <div style="display: flex;align-items: center;">
          <el-select style="width: 20vw;" v-model="form.share_sys_user_id" prop="share_sys_user_id" placeholder="请选择要推广的公众号">
            <el-option :label="item.account?.nick_name" :value="item.id" v-for="item in merchantList" :key="item.id" />
          </el-select>
          <el-button type="primary" style="margin-left: 15px;" @click="onSubmit" >提交</el-button>
        </div>
      
        
      </el-form-item>
        </el-form> -->
  
      <!-- <h3></h3> -->
      <x-table v-loading="tableLoading" :tableData="info" :propList="propList">
        <template #state="{ row }">
          <el-tag v-if="row.state == 1" type="success" effect="dark">
            启用
          </el-tag>
          <el-tag v-else type="danger" effect="dark"> 禁用 </el-tag>
        </template>
        <template #op="{ row }">
          <!-- v-hasPermi="['api:mpManage:editPoster']" -->
          <el-button
            style="margin-right: 10px"
            size="small"
            type="primary"
            icon="Edit"
            @click="edit(row)"
            v-hasPermi="['member:mpPoster:edit']"
            >编辑</el-button
          >
          <el-popconfirm
            @confirm="clearCache(row)"
            title="清除缓存后将重新生成海报上传至微信服务器，确定要清除吗？"
          >
            <!--   v-hasPermi="['api:mpManage:clearPosterCache']" -->
            <template #reference>
              <el-button
                style="margin-right: 10px"
                size="small"
                type="info"
                icon="Delete"
                v-hasPermi="['member:mpPoster:clearPosterCache']"
                >清除缓存</el-button
              >
            </template>
          </el-popconfirm>
          <!-- v-hasPermi="['api:mpManage:delPoster']" -->
          <el-popconfirm @confirm="del(row)" title="确定要删除吗?">
            <template #reference>
              <el-button size="small" type="danger" icon="Delete"
              v-hasPermi="['member:mpPoster:del']">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </x-table>
    </div>
  </template>
  
  <script>
  import {
    getList, del, clearPostCache,
    setShareOfficial, getShareOfficial,
    getOfficialList
   } from "@/api/platform/mpPoster";
  export default {
    name: "platformposterindex",
    data() {
      return {
        tableLoading: false,
        merchantList :[],
        form:{},
        formRules: {
          share_sys_user_id: [{
            required: true,
            message:"请选择"
          }]
        },
        propList: [
          {
            label: "名称",
            prop: "name",
          },
          {
            label: "关键字",
            prop: "keywords",
          },
          {
            label: "状态",
            slotName: "state",
          },
          {
            label: "操作",
            slotName: "op",
          },
        ],
        info: [],
      };
    },
    computed: {},
    created() {
      this.init();
    },
    mounted() {},
    methods: {
      init() {
        this.getInfo();
        // this.getOfficialList();
        // this.getShareOfficial();
      },
      
      async getShareOfficial() {
        const { data } = await getShareOfficial();
        console.log(data);
        this.form = data;
        // 列表
      },
      async getOfficialList() {
        const { data } = await getOfficialList();
        console.log(data);
        this.merchantList = data;
        // 列表
      },
      async getInfo() {
        const { data } = await getList();
        console.log(data);
        this.info = data;
        // 列表
      },
      onSubmit() { 
          this.$refs.share_sys.validate(async valid => {
            if (valid) { 
              await setShareOfficial(this.form)
              this.$message.success("设置成功")
              this.getShareOfficial()
            }
          })
      },
      add() {
        this.$router.push({ path: "addPoster" });
        // this.$router.push({ path: "/mp/addPoster" });
      },
      async clearCache(item) {
        console.log(item);
        const params = {
          // appid: this.$store.getters.curMpInfo.appid,
          // keywords_id: item.keywords_id,
          id: item.id,
        };
        await clearPostCache(params);
        this.$message.success("清除成功!");
      },
      edit(item) {
        // this.$router.push({ path: "/mp/addPoster" });
        // console.log("/addPoster?id=" + item.id);
        this.$router.push({ path: "addPoster", query: { id: item.id } });
        // this.$router.push({ path: "/mp/addPoster", query: { id: item.id } });
      },
      async del(item) {
        const { id, keywords_id } = item;
        await del({ id, keywords_id });
        this.$message.success("删除成功");
        this.getInfo();
      },
    },
  };
  </script>
  
  <style lang="scss" scoped></style>
  